<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="范珍">
    <title>vue进阶-2 过渡效果</title>
    <link rel="stylesheet" href="animate.min.css">
    <script src='vue.js'></script>
    <script src="velocity.min.js"></script>
    <style>
        /*
                v-enter:将要进入时的状态;
                v-enter-active:完全进入时的状态；
                v-leave:将要离开时的状态;
                v-leave-active:完全离开时的状态;

                在v-enter中指明进入的初值；
                在v-leave-active中指明离开的终值;
                进入的终值，离开的初值可以不写;
                在v-enter-active,v-leave-active中指明过渡效果;
            */
        
        .fade-enter {
            opacity: 0;
        }
        
        .fade-enter-active {
            transition: opacity 4s;
        }
        
        .fade-leave-active {
            opacity: 0;
            transition: opacity 2s;
        }
        
    </style>
</head>

<body>
    <div id='app'>
        <button @click="show = !show">显隐切换</button>
        <!--
                添加transition标签,说明需要过渡效果
                name属性指明class样式类的前缀
            -->
        <!--<transition name="fade">
            <p v-if="show">这是一个p标签</p>
        </transition>-->

        <!--
                自定义样式类名称
                借助这种方式,可以使用第三方的动画库,例如animate.css
            -->
        <!--<transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutUp">
            <p v-if="show">这是一个p标签</p>
        </transition>-->

        <!--
                添加js钩子函数实现动画效果
                before-enter:进入之前，初值设置
                enter：设置进入的动画
                leave：设置离开的动画
                :css="false" :跳过css动画检测
            -->
        <transition @before-enter="beforeEnterHandle" @enter="enterHandle" @leave="leaveHandle" :css="false">
            <p v-if="show">这是一个p标签</p>
        </transition>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                show: true
            },
            methods: {
                // el: 要执行动画的标签元素
                // done: 动画完成需要执行的回调函数
                beforeEnterHandle: function (el) {
                    el.style.opacity = 0;
                    // transformOrigin：transform参考点
                    el.style.transformOrigin = "left";
                },
                enterHandle: function (el, done) {
                    // Velocity:是一个js脚本库；专注js动画
                    // para1：动画的标签元素
                    // para2：动画效果
                    // para3：动画配置对象 
                    // duration：持续时间;
                    // complete:动画结束的回调函数名称(上课说错了，是写函数名,不加())
                    // done:当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的
                    Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
                    Velocity(el, { fontSize: '1em' }, { complete: done })
                },
                leaveHandle: function (el, done) {
                    Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
                    Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                    Velocity(el, {
                        rotateZ: '45deg',
                        translateY: '30px',
                        translateX: '30px',
                        opacity: 0
                    }, { complete: done })
                }
            }
        })
    </script>
</body>

</html>